<template>
    <el-card>
        <my-bread level1="权限管理" level2="角色列表"></my-bread>

        <el-row class="addbtn">
            <el-col>
                <el-button type="success">添加</el-button>
            </el-col>
        </el-row>

        <el-table :data="rolelist">
            <el-table-column type="expand" width="80">
                <template slot-scope="scope">
                    <el-row v-for="(item, i) in abc" :key="i">
                        <el-col :span="4">
                            <el-tag>{{ item.authName }}</el-tag>
                        </el-col>
                        <el-col :span="20">
                            <el-row>
                                <el-col :span="4"></el-col>
                                <el-col :span="20"></el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>

            <el-table-column
                type="index"
                label="编号"
                align="center"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="rolea"
                label="角色名称"
                align="center"
                width="200"
            >
            </el-table-column>
            <el-table-column
                prop="roleb"
                label="角色描述"
                align="center"
                width="200"
            >
            </el-table-column>

            <el-table-column
                prop="address"
                label="操作"
                align="center"
                width="160"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        plain
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="edit(scope.$index, scope.row)"
                    ></el-button>
                    <el-button
                        size="mini"
                        plain
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="del(scope.$index, scope.row)"
                    ></el-button>
                    <el-button
                        size="mini"
                        plain
                        type="success"
                        icon="el-icon-check"
                        circle
                        @click="Rol(scope.$index, scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="修改权限" :visible.sync="dialogFormVisible">
            <el-tree
                :data="qx"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[1, 4]"
                :default-checked-keys="[9]"
            >
            </el-tree>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            qx: [
                {
                    id: 1,
                    label: "商品管理",
                    children: [
                        {
                            id: 4,
                            label: "删除商品",
                            children: [
                                {
                                    id: 9,
                                    label: "库存为0商品",
                                },
                                {
                                    id: 10,
                                    label: "库存不为0商品",
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    label: "订单管理",
                    children: [
                        {
                            id: 5,
                            label: "添加订单",
                        },
                        {
                            id: 6,
                            label: "删除订单",
                        },
                    ],
                },
                {
                    id: 3,
                    label: "权限管理",
                    children: [
                        {
                            id: 7,
                            label: "修改登陆密码",
                        },
                        {
                            id: 8,
                            label: "修改库存数量",
                        },
                    ],
                },
            ],
            dialogFormVisible: false,
            rolelist: [
                {
                    rolea: "主管",
                    roleb: "负责人",
                },
                {
                    rolea: "外勤",
                    roleb: "跑业务",
                },
                {
                    rolea: "内勤",
                    roleb: "生产",
                },
            ],
            abc: [
                {
                    authName: "商品管理",
                    path: null,
                },

                {
                    authName: "订单管理",
                    path: null,
                },
                {
                    authName: "权限管理",
                    path: null,
                },
                {
                    authName: "用户管理",
                    path: null,
                },
            ],
        };
    },
    methods: {
        Rol(index, row) {
            this.dialogFormVisible = true;
        },
    },
};
</script>
<style >
.addbtn {
    margin-top: 20px;
}
.el-table {
    width: 85%;
    margin-top: 5px;
}
#dd {
    margin-top: 40px;
}
#dd2 {
    margin-top: 9px;
}
.el-dialog {
    width: 5 00px;
}
</style>